<!--动物防疫  -->
<template>
	<border cardTitle="动物防疫">
		<Chart v-if="!isNull" :optionData="option_column" style="height: 100%"></Chart>
		<div v-else style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
			<img src="/img/dashboard/nullPng.png" alt="" />
		</div>
	</border>
</template>

<script>
import border from '../border.vue';
import StatisticsMixins from '../../StatisticsMixins';
import * as echarts from 'echarts';
let color = ['#2467ED', '#16E4CF', '#EBA62C'];
import { bigScreenApi } from '@/api/index';

let timeOut;
export default {
	components: { border },
	mixins: [StatisticsMixins],
	data() {
		return {
			province: ['甘肃', '湖南', '内蒙', '安徽'],
			option_column: {
				xAxis: {
					type: 'category',
					data: [],
					axisLabel: {
						textStyle: {
							color: '#fff'
						},
						formatter: function (value, index) {
							// console.log(value);
							let aname = value.split(',')[0];
							return aname;
						}
					}
					// label: {
					// 	formatter: p => {
					// 		console.log(p);
					// 		return p.name.split(',')[0];
					// 	}
					// }
				},
				dataZoom: [
					{
						show: false, //为true滚动条出现
						type: 'slider', //type:'inside'，滚动条在最下面，鼠标点击滚动
						startValue: 0, // 从头开始。
						endValue: 5 //end百分比显示范围，endValue具体显示几个数值
					}
				],
				grid: {
					left: '12%',
					top: '15%',
					bottom: '15%',
					right: '12%'
				},
				yAxis: {
					type: 'value',
					nameTextStyle: {
						fontSize: 14,
						fontWeight: 800
					},
					splitNumber: 3,
					minInterval: 1,
					splitLine: {
						lineStyle: {
							type: 'dashed',
							opacity: 0.5,
							color: '#495059'
						}
					},
					axisLabel: {
						textStyle: {
							color: '#999999'
						}
					}
				},
				tooltip: {
					formatter: function (value, index) {
						// console.log(value);
						let aname = value.name.split(',')[1];

						return aname + ':' + value.value + '头';
					}
				},
				itemStyle: {
					normal: {
						color: '#4282FF'
					}
				},
				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						barWidth: 12,
						itemStyle: {
							normal: {
								color: '#28F3F3',
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										// 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
										// 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
										offset: 0,
										color: '#28F3F3'
									},
									{
										offset: 1,
										color: ' rgba(63,149,206,0.3)'
									}
								])
							}
						},
						label: {
							show: true,
							position: 'top',
							fontSize: 12,
							textStyle: {
								//数值样式
								color: '#fff'
								// fontStyle: 'italic',
								// fontSize: 16,
							}
						}
					}
				]
			},
			isNull: true
		};
	},
	props: {
		level: {
			type: [String, Number],
			default: 0
		},
		areaList: {
			type: [Array],
			default: () => []
		},
		cityId: {
			type: [String, Number],
			default: ''
		}
	},
	watch: {
		level: {
			handler(newV, oldV) {
				this.getInfo();
			},
			immediate: true
		}
	},
	methods: {
		getInfo() {
			this.$postAction(bigScreenApi.vaccinationCowCount, {
				xzqhbm: this.level > 1 ? this.cityId : '',
				level: this.level
			}).then(res => {
				if (res && res.code == 1) {
					let cowData = res.data;
					console.log(cowData);
					let data = [];
					let nameList = [];
					cowData.forEach(item => {
						data.push(item.vaccinationCowCount);
						nameList.push(item.xzqhmc.slice(0, 3) + ',' + item.xzqhmc);
					});
					console.log(data);
					this.isNull = cowData.length == 0 ? true : false;

					this.option_column.series[0].data = data;
					this.option_column.xAxis.data = nameList;
				}
			});
		},
		autoMove() {
			timeOut = setInterval(() => {
				// clearInterval(this.timeOut)
				// 每次向后滚动一个，最后一个从头开始。
				// if(this.stopMove){ return }
				if (Number(this.option_column.dataZoom[0].endValue) == this.option_column.series[0].data.length - 1) {
					this.option_column.dataZoom[0].endValue = 6;
					this.option_column.dataZoom[0].startValue = 0;
				} else {
					this.option_column.dataZoom[0].endValue = this.option_column.dataZoom[0].endValue + 1;
					this.option_column.dataZoom[0].startValue = this.option_column.dataZoom[0].startValue + 1;
				}
				// myChart.setOption(this.option_column);
			}, 3000);
		}
	},
	mounted() {
		this.autoMove();
	},
	beforeDestroy() {
		clearInterval(timeOut);
	}
};
// var timeOut = null;
// myChart.on('mouseover', stop);
// myChart.on('mouseout', goMove);
// autoMove();

// //停止滚动
// function stop() {
//   clearInterval(timeOut);
// }
// //继续滚动
// function goMove() {
//   autoMove();
// }
</script>

<style></style>
